import React, {Component} from 'react';
import {TouchableOpacity, View, Text, ToastAndroid} from 'react-native';
import {cwGet} from '../utils/http';
import {ScrollView} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/AntDesign';
export default class DevicePage extends Component {
  static navigationOptions = ({navigation}) => {
    const {params = {}} = navigation.state;
    return {
      headerRight: () => (
        <TouchableOpacity
          style={{marginRight: 20}}
          onPress={() => {
            params.getDevice();
          }}>
          <Icon name={'reload1'} size={20} />
        </TouchableOpacity>
      ),
    };
  };
  constructor(props) {
    super(props);
    this.state = {
      deviceList: [],
    };
  }
  componentDidMount() {
    this._getDevice();
    this.props.navigation.setParams({getDevice: this._getDevice});
  }
  _getDevice = () => {
    cwGet('RealTime/GetDevicesForApp')
      .then(res => {
        this.setState({deviceList: res}, () => {
          ToastAndroid.show('加载成功', ToastAndroid.SHORT);
        });
      })
      .catch(() => alert('获取失败'));
  };
  render() {
    return (
      <>
        <ScrollView style={{flex: 1, backgroundColor: '#EEEEEE'}}>
          {this.state.deviceList.map((l, i) => {
            return (
              <View
                style={{
                  backgroundColor: '#FFF',
                  marginBottom: 5,
                  height: 60,
                  borderWidth: 0.1,
                  borderColor: 'grey',
                  padding: 4,
                }}>
                <Text
                  style={{
                    fontSize: 20,
                    marginLeft: 10,
                  }}>
                  {l.name}
                </Text>
                <Text
                  style={{
                    fontSize: 11,
                    color: '#FFF',
                    position: 'absolute',
                    top: 10,
                    right: 5,
                    width: 35,
                    textAlign: 'center',
                    backgroundColor: l.isOnline ? 'green' : 'grey',
                  }}>
                  {l.isOnline ? '在线' : '离线'}
                </Text>
              </View>
            );
          })}
        </ScrollView>
      </>
    );
  }
}
